<template>
    <div class="page" v-loading="loading">
        <div class="tool">
            <el-icon class="tool-icon" @click="type = !type" title="切换模式">
                <Menu />
            </el-icon>
        </div>
        <el-tabs v-show="type" tab-position="left" style="height: calc(100% - 35px);">
            <el-tab-pane :label="item.title" v-for="item in data" class="main">
                <div v-for="subItem, index in item.items">
                    <h3>{{ (index + 1) + '. ' + subItem.title }}</h3>
                    <table v-if="subItem.contentType == 'table'" class="table">
                        <thead>
                            <tr>
                                <th v-for="meta in subItem.metaData">{{ meta }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in subItem.rows">
                                <td v-for="column in row" v-html="column"></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="text" v-else v-html="subItem.text"></div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div v-show="!type" class="main" style="height: calc(100% - 55px); overflow: auto; background-color: #fff;">
            <div v-for="item in data">
                <h2>{{ item.title }}</h2>
                <span class="time">耗时：{{ item.time }}ms</span>
                <div v-for="subItem, index in item.items">
                    <h3>{{ (index + 1) + '. ' + subItem.title }}</h3>
                    <table v-if="subItem.contentType == 'table'" class="table">
                        <thead>
                            <tr>
                                <th v-for="meta in subItem.metaData">{{ meta }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in subItem.rows">
                                <td v-for="column in row" v-html="column"></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="text" v-else v-html="subItem.text"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import net from '@/util/net'
import { onBeforeMount, ref } from 'vue'
import { Menu } from '@element-plus/icons-vue'

const data = ref([])
const loading = ref(true)
const type = ref(true)

onBeforeMount(() => {
    getCheckData()
})

const getCheckData = () => {
    loading.value = true
    net.get('/inspect/systemCheck').then(res => {
        data.value = res
        loading.value = false
    })
}
</script>
<style lang="scss" scoped>
.tool {
    padding: 5px;
    text-align: right;

    &-icon {
        background-color: #fff;
        padding: 3px;
        cursor: pointer;
    }

    &-icon:hover {
        color: #409EFF;
    }
}

.main {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    overflow: auto;
    height: calc(100% - 20px);

    h3 {
        font-size: .8rem;
        margin: 10px 0;
    }

    .time {
        font-size: .8rem;
        font-style: italic;
        color: #909399;
    }

    .table {
        border-radius: 5px;
        border-collapse: collapse;
        font-size: .8rem;
        background-color: #fff;

        td,
        th {
            padding: .3rem .5rem;
            border: 1px solid rgb(197.7, 225.9, 255);
        }

        th {
            text-align: left;
            background-color: rgb(121.3, 187.1, 255);
        }
    }

    .text {
        background: #F2F6FC;
        border-radius: 5px;
        padding: 10px;
        line-height: 1.5rem;
        white-space: pre;
        display: inline-block;
        min-width: 200px;
    }
}
</style>